{% extends "base.html" %}

{% block title %}撰写消息{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">撰写消息</h4>
                    <div>
                        <a href="{{ url_for('message.message_center') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" id="message-form">
                        {{ form.hidden_tag() }}
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    {{ form.title.label(class="form-control-label") }}
                                    {{ form.title(class="form-control") }}
                                    {% if form.title.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.title.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    {{ form.content.label(class="form-control-label") }}
                                    {{ form.content(class="form-control", rows="8") }}
                                    {% if form.content.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.content.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{ form.message_type.label(class="form-control-label") }}
                                    {{ form.message_type(class="form-control") }}
                                    {% if form.message_type.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.message_type.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    {{ form.priority.label(class="form-control-label") }}
                                    {{ form.priority(class="form-control") }}
                                    {% if form.priority.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.priority.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    {{ form.recipients.label(class="form-control-label") }}
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="select-all-users">
                                                <label class="form-check-label" for="select-all-users">
                                                    全选所有用户
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-2" id="recipients-container">
                                        {% for user in users %}
                                        <div class="col-6 mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input recipient-checkbox" type="checkbox" 
                                                       name="recipients" value="{{ user.id }}" id="user-{{ user.id }}">
                                                <label class="form-check-label" for="user-{{ user.id }}">
                                                    {{ user.name }} ({{ user.department.name if user.department else '无部门' }})
                                                </label>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                    {% if form.recipients.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.recipients.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    {{ form.related_type.label(class="form-control-label") }}
                                    {{ form.related_type(class="form-control") }}
                                    {% if form.related_type.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.related_type.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-group">
                                    {{ form.related_id.label(class="form-control-label") }}
                                    {{ form.related_id(class="form-control") }}
                                    {% if form.related_id.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.related_id.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-paper-plane"></i> 发送消息
                                    </button>
                                    <button type="reset" class="btn btn-outline-secondary ml-2">
                                        <i class="fas fa-redo"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 全选/取消全选
    $('#select-all-users').change(function() {
        $('.recipient-checkbox').prop('checked', $(this).prop('checked'));
    });
    
    // 更新全选状态
    $('.recipient-checkbox').change(function() {
        var allChecked = $('.recipient-checkbox:checked').length === $('.recipient-checkbox').length;
        $('#select-all-users').prop('checked', allChecked);
    });
    
    // 表单提交前验证
    $('#message-form').submit(function(e) {
        var checkedCount = $('.recipient-checkbox:checked').length;
        if (checkedCount === 0) {
            e.preventDefault();
            alert('请至少选择一个收件人');
            return false;
        }
    });
});
</script>
{% endblock %}